<!--Breadcrumb Start-->
<div class="breadcrumb-container">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <div class="breadcrumbs">
          <ul>
            <li class="home"><a href="{:url('index/index')}">Home</a><span>/ </span></li>
            <li><strong>Product Details</strong></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>
<!--End of Breadcrumb-->
<!--Product Details Area Start-->
<div class="product-deails-area">
  <div class="container">
    <div class="row">
      <div class="col-lg-9 col-md-9">

        {if $data}
        <div class="product-details-content row">
          <div class="col-lg-6 col-md-6 col-sm-6">
            <div class="zoomWrapper">
              <div id="img-1" class="zoomWrapper single-zoom">
                <a href="#">
                  <img id="zoom1" src="{$data.image}" data-zoom-image="{$data.image}" alt="big-1">
                </a>
              </div>
              <div class="product-thumb row">
                <ul class="p-details-slider" id="gallery_01">
                  <li class="col-md-4">
                    <a class="elevatezoom-gallery" href="#" data-image="{$data.image}" data-zoom-image="{$data.image}"><img src="{$data.image}" alt=""></a>
                  {volist name="data.images" id="vo"  }
                  <li class="col-md-4">
                  <a class="elevatezoom-gallery" href="#" data-image="{$vo}" data-zoom-image="{$vo}"><img src="{$vo}" alt=""></a>
                  </li>
                  {/volist}
                </ul>
              </div>
            </div>
          </div>
          <div class="col-lg-6 col-md-6 col-sm-6">
            <div class="product-details-conetnt">
              <div class="shipping">
                <div class="single-service">
                  <span class="fa fa-truck"></span>
                  <div class="service-text-container">
                    <h3>fREE SHIPPING</h3>
                    <!--<p>One order over Rs.99</p>-->
                  </div>
                </div>
                <div class="single-service">
                  <span class="fa fa-cube"></span>
                  <div class="service-text-container">
                    <h3>UNLIMITED UNLIMITED</h3>
                    <p>Lorem ipsum dolor sit amet</p>
                  </div>
                </div>
              </div>
              <div class="product-name">
                <h1> {$data.name} </h1>
              </div>
              <p class="no-rating no-margin"><a href="#">Be the first to review this product</a></p>
              <p class="availability">Availability: <span>In stock: </span>{$data.stock}</p>
              <div class="price-box">
                <p class="old-price">
                  <span class="price">Rs.{$data.mktprice}</span>
                </p>
                <p class="special-price">
                  <span class="price">Rs.{$data.price}</span>
                </p>
              </div>
              <div class="details-description">
                <p>
                  {$data.brief}
                </p>
                {volist name="data.params" id="vo"}
                <div>
                  {$key} : {$vo}
                </div>
                {/volist}
              </div>
              <div class="quick-add-to-cart">
                <form method="post" action="{:url('order/checkout')}" class="cart">
                  <div class="numbers-row">
                    <input type="hidden" name="products_id" value="{$data.products_id}">
                    <input type="number" id="french-hens" name="num" value="1">
                  </div>
                  <button class="single_add_to_cart_button" type="submit">Buy Now</button>
                </form>
                <div class="cart-qty-button">
                  <button class="button btn-cart" type="button" id="add-cart"><span>Add to Cart</span></button>
                </div>
              </div>
            </div>
          </div>
        </div>
        {else}
        <span style="font-size: 28px; margin-top: 10px; display: block;">
          The Goods does not exist or has been taken off the shelf
        </span>
        {/if}

        <!--<div class="row">
          <div class="col-lg-12 col-md-12 col-sm-12">
            <div class="p-details-tab">
              <ul role="tablist" class="nav nav-tabs">
                <li class="active" role="presentation"><a data-toggle="tab" role="tab" aria-controls="params" href="#params">Product Params</a></li>
                <li role="presentation"><a data-toggle="tab" role="tab" aria-controls="description" href="#description">Product Description</a></li>
              </ul>
            </div>
            <div class="clearfix"></div>
            <div class="tab-content review product-details">
              <div id="params" class="tab-pane active" role="tabpanel">
                {volist name="data.params" id="vo"}
                <div>
                  {$key} : {$vo}
                </div>
                {/volist}
              </div>
              <div id="description" class="tab-pane" role="tabpanel">
                {$data.intro_content|htmlspecialchars_decode}
              </div>
            </div>
          </div>
        </div>-->
        <div class="product-carousel-area section-top-padding">
          <div class="row">
            <div class="col-md-12">
              <div class="section-title"><h2>Upsell Products</h2></div>
            </div>
          </div>
          <div class="row">
            <div class="upsell-product-details-carousel">
              {volist name="topList" id="vo"}
              <div class="col-md-3">
                <div class="single-product-item">
                  <div class="single-product clearfix">
                    <a href="{:url('goods/detail',['id' => $vo.id])}">
                      <span class="product-image">
                      <img src="{$vo.image}" alt="{$vo.name}">
                      </span>
                    </a>
                  </div>
                  <h2 class="single-product-name"><a href="{:url('goods/detail',['id' => $vo.id])}">{$vo.name}</a></h2>
                  <div class="price-box">
                    <p class="special-price">
                      <span class="price">Rs.{$vo.price}</span>
                    </p>
                  </div>
                </div>
              </div>
            {/volist}
            </div>
          </div>
        </div>
      </div>
      <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
        <div class="sidebar-content">
          <div class="section-title no-margin"><h2>POPULAR TYPE</h2></div>
          <div class="popular-tags">
            <ul class="tag-list">
              {volist name="typeList" id="vo"  }
              <li><a href="{:url('goods/index', ['type' => $vo.id])}">{$vo.name}</a></li>
              {/volist}
            </ul>
          </div>
        </div>
        <div class="sidebar-content">
          <div class="banner-box">
            <a href="#"><img alt="" src="/img/banner/16.jpg"></a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<!--End of Product Details Area-->

<label class="cafe-canvas-cart-mask cafe-mask-close"></label>
<div class="cafe-canvas-cart-content widget_shopping_cart woocommerce">
  <div class="cafe-heading-cart-content">
  Cart            (<span class="cafe-cart-count" style="opacity: 1;">12</span>)
  <span class="cafe-close-cart">Close<i class="cs-font clever-icon-close"></i></span></div>
  <div class="widget_shopping_cart_content" style="opacity: 1;"></div>
</div>

<style>
  #description p {
    display: block;
    margin: 0 0;
    line-height: normal;
  }
  .showcart{
    margin-top: 0;
    transform: rotateX(0deg) !important;
    visibility: visible !important;
    z-index: 99999 !important;
  }
  .cafe-toggle-input:checked~.cafe-mask-close {
    opacity: 1;
    visibility: visible;
  }
  .cafe-mask-close {
    width: 100vw;
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    background: rgba(0,0,0,.6);
    transition: .3s ease-out;
    visibility: hidden;
    opacity: 0;
    z-index: 88;
    cursor: url(data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 18 18' fill='%23fff'%3e%3cpath d='M14.53 4.53l-1.06-1.06L9 7.94 4.53 3.47 3.47 4.53 7.94 9l-4.47 4.47 1.06 1.06L9 10.06l4.47 4.47 1.06-1.06L10.06 9z'/%3e%3c/svg%3e),pointer;
  }

  .cafe-canvas-cart-content {
    position: fixed;
    text-align: left;
    top: 0;
    right: 0;
    width: calc(100% - 50px);
    max-width: 480px;
    height: 100%;
    background: var(--bg-color);
    box-shadow: 0 0 5px rgb(0 0 0 / 50%);
    z-index: 99;
    visibility: hidden;
    transform: translateX(480px);
    transition: all .3s;
    padding: 20px 15px;
    font-size: 1rem;
  }
</style>